<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript实现动态改变样式文件</title>
<link href="css/style1.css" type="text/css" rel="stylesheet" id="cssfile" />
<script type="text/javascript">
  function changestyle(name){
	  css=document.getElementById("cssfile");
	  css.href="css/"+name+".css";
  }
</script>
</head><body>

<div id="content">
  <div id="proPanel">
    <div class="proPanelCon1">
    <div class="pro-title" style="BACKGROUND-IMAGE: url(images/title01.gif)"></div>
    <div class="pro-img"><img height="150" src="images/sc1.gif" width="230" /></div>
    <div class="pro-intro" style="HEIGHT: 180px">&nbsp;&nbsp;&nbsp;&nbsp;<b></b>大九寨<br />&nbsp;&nbsp;&nbsp;&nbsp; 
    我国目前被联合国教科文组织纳入《世界自然遗产名录》的只有五处，阿坝州就占三处，包括九寨沟风景名胜区和黄龙名胜区以及四川大熊猫栖息地的大部分。<br />　　
    翠绿而金黄的树，高峻而多姿的山，明丽而浓艳的水，构成九寨沟绝世之美。湖水终年碧蓝澄清明丽见底，随着光照变化，季节推移，呈现出不同的色彩和风韵，有“黄山归来不看山，九寨归来不看水”之说。 
    </div>
    <div class="pro-scenic">
    <table>
      <tbody>
      <tr>
        <td><img height="40" src="images/01.gif" width="40" /><br />
          九寨沟 </td>
        <td><img height="40" src="images/02.gif" width="40" /><br />
          黄龙 </td>
        <td><img height="40" src="images/03.jpg" width="40" /><br />
          牟尼沟 </td>
        <td><img height="40" src="images/04.gif" width="40" /><br />
          神仙池  </td>
      </tr></tbody></table></div>
    <div class="pro-more">
    查看更多景区 <img alt="查看更多" src="images/more.gif" /> </div>
    </div>
    
    <div class="proPanelCon3">
      <div class="pro-title" style="BACKGROUND-IMAGE: url(images/title03.gif)"></div>
      <div class="pro-img"><img height="150" src="images/sc3.gif" width="230" /></div>
      <div class="pro-intro" style="HEIGHT: 180px">&nbsp;&nbsp;&nbsp;&nbsp;<b></b>大熊猫<br />
        &nbsp;&nbsp;&nbsp;&nbsp;四川大熊猫栖息地于2006年7月12日被联合国教科文组织正式评审通过为世界自然遗产地<span class="pro-intro" style="HEIGHT: 180px">，</span>包括卧龙、四姑娘山、小金与宝兴交界的夹金山等地<span class="pro-intro" style="HEIGHT: 180px">，</span>是世界上野生大熊猫数量最多的地区<span class="pro-intro" style="HEIGHT: 180px">，</span>其中卧龙自然保护区是世界上最大的大熊猫保护区<span class="pro-intro" style="HEIGHT: 180px">，</span>面积20万公<span class="pro-intro" style="HEIGHT: 180px">，</span>是中国最早建立的综合性国家级保护区之一<span class="pro-intro" style="HEIGHT: 180px">，</span>是国家和四川省命名的’"科普教育基地"、"爱国主义教育基地"<span class="pro-intro" style="HEIGHT: 180px">。</span></div>
      <div class="pro-scenic">
      <table>
        <tbody>
        <tr>
          <td><img height="40" src="images/09.gif" width="40" /><br />
            四姑娘山 </td>
          <td><img height="40" src="images/10.jpg" width="40" /><br />
            卧龙 </td>
          <td><img height="40" src="images/11.jpg" width="40" /><br />
            桃坪羌寨 </td>
          <td><img height="40" src="images/12.gif" width="40" /><br />
            三星堆 </td>
        </tr></tbody></table></div>
      <div class="pro-more">查看更多景区 <img alt="查看更多" src="images/more.gif" /> </div>
    </div>
    
    <div class="proPanelCon2">
    <div class="pro-title" style="BACKGROUND-IMAGE: url(images/title02.gif)"></div>
    <div class="pro-img"><img height="150" src="images/sc2.gif" width="230" /></div>
    <div class="pro-intro" style="HEIGHT: 180px">&nbsp;&nbsp;&nbsp;&nbsp;<b></b>大草原<br />
      &nbsp;&nbsp;&nbsp;&nbsp;山高水远，草长鹰飞，辽远的牧歌伴随着白云在悠远的晴空自由的飘飞。当岁月随着古老的日落日出而流走，在这里，炊烟依然安详，羊群依旧平静，仿佛所有的静穆都是一种隐预和暗示，这就是美丽富饶的黄河大草原。整个景区呈现出一片壮丽的景象，落日时分，登高远眺，惟有这里才能体会到“落霞与孤鹭齐飞，秋水共长天一色”以及“长河落日圆”之神韵。</div>
    <div class="pro-scenic">
    <table>
      <tbody>
      <tr>
        <td><img height="40" src="images/05.jpg" width="40" /><br />
          红原 </td>
        <td><img height="40" src="images/06.jpg" width="40" /><br />
          达古冰川 </td>
        <td><img height="40" src="images/07.jpg" width="40" /><br />
          若尔盖 </td>
        <td><img height="40" src="images/08.jpg" width="40" /><br />
          马尔康 </td>
      </tr></tbody></table></div>
    <div class="pro-more">查看更多景区 <img alt="查看更多" src="images/more.gif" /> </div>
    </div>
  </div>
  <div id="bottom">Copyright&nbsp;© &nbsp;2019-2025
 All Rights Reserved&nbsp;蝴蝶工作室 版权所有&nbsp;&nbsp;&nbsp;&nbsp;切换样式：<span style="cursor:pointer" onclick="changestyle('style1');">应用CSS样式1</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span style="cursor:pointer" onclick="changestyle('style2');">应用CSS样式2</span></div>
</div>
</body>
</html>
